<template>
  <view class="scroll-container">
    <!-- 导航按钮（与di3.vue保持一致） -->
    <navigator url="/pages/index/shou_ye/di5" class="nav-button">
      舌尖记忆>>
    </navigator>

    <!-- 第一块区域 -->
    <view class="section section-1">
      <text class="section-title">星轨飞行日志</text>
      <view class="content-placeholder tp8-image"></view>
    </view>

    <!-- 第二块区域：散点图 -->
    <view class="section section-2">
      <text class="section-title">我们的四季劳动光谱</text>
      <view class="content-placeholder">
        <!-- 添加echarts容器 -->
        <view id="scatter-chart" class="chart-container"></view>
      </view>
    </view>

    <!-- 第三块区域 -->
    <view class="section section-3">
      <text class="section-title">区域标题三</text>
      <view class="content-placeholder">
        <!-- 添加四个文本框 -->
        <view class="stats-container">
          <view class="stat-box">
            <text class="stat-label">社会实践与志愿服务参与</text>
            <text class="stat-value">11 次</text>
          </view>
          <view class="stat-box">
            <text class="stat-label">校内劳动活动参与</text>
            <text class="stat-value">16 次</text>
          </view>
          <view class="stat-box">
            <text class="stat-label">劳动课程参与</text>
            <text class="stat-value">3 次</text>
          </view>
          <view class="stat-box">
            <text class="stat-label">劳动基地实践参与</text>
            <text class="stat-value">2 次</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts';

export default {
  onReady() {
    // 初始化散点图
    this.initScatterChart();
  },
  methods: {
    initScatterChart() {
      const chartDom = document.getElementById('scatter-chart');
      const myChart = echarts.init(chartDom);

      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.6)'
            }
          },
          axisLabel: {
            color: 'red',
            fontSize: 14
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.6)'
            }
          },
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)'
          }
        },
        series: [{
          name: '劳动数据',
          type: 'scatter',
          data: [
            [0, 8.04], [1, 6.95], [2, 7.58], [3, 8.81], [4, 8.33], [5, 7.66],
            [0, 6.33], [1, 8.96], [2, 6.82], [3, 7.20], [4, 7.20], [5, 4.23]
          ],
          symbolSize: 15,
          itemStyle: {
            color: 'rgba(255, 165, 0, 0.8)'
          }
        }]
      };

      myChart.setOption(option);

      uni.$on('resize', () => {
        myChart.resize();
      });

      this.$on('hook:beforeDestroy', () => {
        myChart.dispose();
      });
    }
  }
};
</script>

<style scoped>
/* 页面背景图设置 */
page {
  background-image: url('static/tp/tp7.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow-y: auto;
}

.scroll-container {
  padding: 20rpx;
}

/* 导航按钮样式（与di3.vue完全一致） */
.nav-button {
  width: 200rpx;
  height: 80rpx;
  background-color: #043cf3;
  color: white;
  text-align: center;
  line-height: 80rpx;
  border-radius: 40rpx;
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 32rpx;
  text-decoration: none;
}

/* 通用区域样式 */
.section {
  width: 95%;
  margin: 0 auto 20rpx;
  border-radius: 15rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 20rpx;
  background-color: transparent;
  border: 5rpx solid rgba(250, 8, 8, 0.7);
}

/* 区域标题样式 */
.section-title {
  font-size: 40rpx;
  color: #3460f1;
  font-weight: bold;
  text-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.3);
  padding: 12rpx 30rpx;
  border-radius: 50rpx;
  background-color: rgba(244, 7, 7, 0.25);
  margin-bottom: 25rpx;
  letter-spacing: 2rpx;
}

/* 内容占位区域 */
.content-placeholder {
  width: 90%;
  height: auto;
  min-height: 200rpx;
  background-color: transparent;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 图表容器样式 */
.chart-container {
  width: 100%;
  height: 400rpx;
}

/* 图片样式 */
.tp8-image {
  background-image: url('static/tp/tp8.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: padding-box;
  width: 100%;
  height: 800rpx;
}

/* 统计数据容器样式 */
.stats-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20rpx;
  padding: 10rpx;
}

/* 文本框样式 */
.stat-box {
  flex: 1 1 calc(50% - 20rpx);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10rpx;
  padding: 20rpx;
  min-height: 120rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 标签文本样式 */
.stat-label {
  color: rgba(237, 5, 5, 0.9);
  font-size: 35rpx;
  margin-bottom: 10rpx;
}

/* 数值文本样式 */
.stat-value {
  color: #ff6b6b;
  font-size: 36rpx;
  font-weight: bold;
}

/* 区域高度设置 */
.section-1 {
  height: auto;
  min-height: 40vh;
}

.section-2 {
  height: 45vh;
}

.section-3 {
  height: 50vh;
}
</style>